<!-- 这是一个新闻资讯页面 -->
<template>
    <div>
        <el-container>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
                <el-breadcrumb-item>{{ label }}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-aside></el-aside>
            <el-main>
                <el-tabs :tab-position="tabPosition" style="height: 100%;" @tab-click="handleClick"
                    v-model="activeName">
                    <el-tab-pane :name="aaa">
                        <span slot="label"><i class="el-icon-date"></i>{{ aaa }}</span>
                        <h1>{{ aaa }}</h1>
                        <div class="news" v-for="item in books" :key="item.id" v-if="item.announceclass == '新闻'">
                            <div class="image-div">
                                <img :src="item.image" alt="" class="newsimg">
                            </div>
                            <div class="title-box1">
                                <span >{{ item.title }}</span><br>
                                <p class="message-title">{{ item.message }}</p>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :name="bbb">
                        <span slot="label"><i class="el-icon-date"></i>{{ bbb }}</span>
                        <h1>{{ bbb }}</h1>
                        <div class="news" v-for="item in books" :key="item.id" v-if="item.announceclass == '公告'">
                            <div class="image-div">
                                <img :src="item.image" alt="" class="newsimg">
                            </div>
                            <div class="title-box1">
                                <h2 class="h2">{{ item.title }}</h2><br>
                                <p class="message-title">{{ item.message }}</p>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import PerFormance from '../PerFormance/PerFormance';
export default {
    components: {
        PerFormance
    },
    methods: {
    },
    data() {
        return {
            tabPosition: 'left',
            books: [],
            gonggao: [],
            currentDate: new Date(),
            total: "",
            aaa: "新闻",
            bbb: "公告",
            activeName: '新闻',
            label: "新闻 ",
        }
    },
    mounted() {
        this.aa();
    },
    methods: {
        aa() {
            var _this = this
            this.$axios.get('/announcement').then(resp => {
                if (resp && resp.status === 200) {
                    //if(resp.data.)
                    _this.books = resp.data
                    this.total = _this.books.length;

                }
            })
        },

        handleClick(tab, event) {
            console.log(tab.name)  //获取tab标签的选中值
            this.label = tab.name
        },
    },
}




</script>

<style scoped>
.el-main::-webkit-scrollbar {
    display: none;
}

.el-aside {
    text-align: center;
    line-height: 200px;
}

.el-main {
    text-align: center;
}


.news {
    width: 100%;
    height: 240px;
  
    display: flex;
}

h1 {
    border-bottom: 1px solid #ccc;
    font-size: 33px;
    /* 行高是1倍, 就是字号的大小 */
    line-height: 1;
    padding-bottom: 9px;
}

.h2 {
    position: relative;
    left: -15%;
}

time {
    position: relative;
    left: -15%;
}

/* 去掉列表的符号 */
ul {
    list-style: none;
}

/* li {} */

.news li {
    height: 50px;
    border-bottom: 1px dashed #ccc;
    padding-left: 28px;
    line-height: 50px;
}

.news a {
    text-decoration: none;
    color: #666;
    font-size: 18px;
}

.breadcrumb {
    font-size: 16px;
    position: absolute;
    left: 23%;
}

.el-tabs__item {
    font-size: 25px;
    color: rgb(218, 89, 89);
}

.el-tabs span {
    width: 100%;
    font-size: 25px;
}

.newsimg {
    width: 250px;
    height: 150px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    border-radius: 25px;
}

.image-div {
    flex: 1;
  

    white-space: nowrap;
}
.title-box1{
   
    flex: 4;
 
    overflow: hidden;
    
}
.message-title{
text-align: left;

}

</style>
